Bootstrap Selection
基于Bootstrap.dropdown来制作的一个下拉多选控件
使用前需加载JQuery
、Bootstrap库(样式和JS)
还有underscore js
。
如果不需要动态加载下拉项可不加载underscore js
例子
简单使用
<div class="dropdown dropdown-checkbox" data-target="dropdown-checkbox">
<a href="#" id="drop2" role="button" class="dropdown-checkbox-toggle dropdown-toggle" data-toggle="dropdown">星级 <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-checkbox-menu" role="menu" aria-labelledby="drop2">
<li><label for="1" class="checkbox"><input id="1" name="star" type="checkbox" value="">五星</label></li>
<!-- ... -->
<li><label for="8" class="checkbox"><input id="8" name="star" type="checkbox" value="">经济型</label></li>
</ul>
</div>
//简单使用
$('#small-exp').selection();
动态加载
//数据源
var data = [
{"id":1,"name":"star","content":"五星"},
{"id":2,"name":"star","content":"准五星"},
{"id":3,"name":"star","content":"四星"},
{"id":4,"name":"star","content":"准四星"},
{"id":5,"name":"star","content":"三星"},
{"id":6,"name":"star","content":"准三星"},
{"id":7,"name":"star","content":"二星"},
{"id":8,"name":"star","content":"经济型"}
];
//动态加载例子
$('#small-exp').selection('source',data);
方法
显示(或隐藏)下拉框$('.dropdown-checkbox').selection('toggle')
全选$('.dropdown-checkbox').selection('all')
反选$('.dropdown-checkbox').selection('invert')
取消选择$('.dropdown-checkbox').selection('none')
取得标题$('.dropdown-checkbox').selection('title')
设置标题$('.dropdown-checkbox').selection('title','标题')
取得数据源$('.dropdown-checkbox').selection('source')
设置数据源$('.dropdown-checkbox').selection('source',{JSON})
取得所有下拉项的JQuery对象(就是所有checkbox)$('.dropdown-checkbox').selection('items')
事件
多选控件勾选后促发bs.selection.changed事件。
$('.dropdown-checkbox').selection().on('bs.selection.changed',function(e,selection,$item){
//...
});
其他
在dropdown-checkbox元素中设置以下data-
属性会自动加载
data-title='星级 <b class="caret"></b>'
data-source='[{"id":1,"name":"star","content":"五星"},...,{"id":8,"name":"star","content":"经济型"}]'
取得每个子项的数据源,前提是动态加载下拉的子项
$('.dropdown-checkbox').selection('items').each(function(){
//数据保存在li上
var data = $(this).parents('li').data('bs.selection.item.data');
});
===============[更新说明]================
项目新版本已经使用bower、gruntjs等管理工具从新打包,多谢各位关注。
由于我觉得coding.net有趣一点,把项目迁移到coding了,地址如下:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。